<template>
  <div>
    <a-modal v-model:visible="visible" title="为该用户打分" @ok="handleOk">
      <a-form-item label="草稿：">
        <a-textarea v-model:value="record" placeholder="记录一下该面试者的其他情况" auto-size />
      </a-form-item>
      <div class="detail" v-for="(detailItem, index) in detaiData" :key="index">
        <div class="detail__text">
          <a-typography-text class="detail__text__title">{{ index + 1 }}. {{ detailItem.title }}</a-typography-text>
          <a-typography-text type="secondary" class="detail__text__description"> {{ detailItem.description }}[占{{ detailItem.weight * 10 }}%] </a-typography-text>
        </div>
        <div class="detail__score">
          <a-input-number :min="1" :max="10" v-model:value="scoreList[index]" placeholder="输入1-10" style="width: 160px" @change="changeScore" />
        </div>
      </div>
      <template #footer>
        <a-space>
          总计<span style="color: red; font-weight: bold">{{ scoreTatal }}</span
          >分
          <a-button key="cancel" @click="handleCancel">取消</a-button>
          <a-popconfirm title="确定提交打分情况？" ok-text="是的" cancel-text="取消" @confirm="handleOk">
            <a-button key="submit" type="primary">确定</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { message } from 'ant-design-vue'
import { defineComponent, onUpdated, ref, Ref, toRaw } from 'vue'
import { useRoute } from 'vue-router'
import { get, post } from '../../../utils/request/request'

interface DetailData {
  id: number
  title: string
  description: string
  weight: number
  number: number
}

// 细则数据
const detaiData: Ref<DetailData[]> = ref([
  {
    id: 1, //细则id
    title: '第一印象111', //标题
    description: '对面试者的第一印象咯，还有什么真的是',
    weight: 1,
    number: 1
  },
  {
    id: 2, //细则id
    title: '兴趣1', //标题
    description: '面试者的兴趣',
    weight: 5,
    number: 2
  },
  {
    id: 3, //细则id
    title: '技术111', //标题
    description: '技术行不行',
    weight: 10,
    number: 3
  },
  {
    id: 5, //细则id
    title: '热情', //标题
    description: '我也不知道我随便编的',
    weight: 1,
    number: 4
  }
])

// 分数相关
const useScoreEffect = () => {
  const scoreList = ref<number[]>([])
  const scoreTatal = ref<number>(0)
  const record = ref<string>('')
  return { scoreList, scoreTatal, record }
}

// modal
const useModalEffect = (token: string, app_user_id: number, scoreTatal: Ref<number>, scoreList: number[], weightList: number[], record: Ref<string>, emit: any) => {
  const { postScore } = useHttpEffect(token)
  const visible = ref<boolean>(false)
  const showModal = () => {
    visible.value = true
    emit('showModal')
  }
  const handleOk = () => {
    postScore(app_user_id, scoreTatal.value, record.value, emit).then(() => {
      visible.value = false
    })
  }
  const handleCancel = () => {
    visible.value = false
  }
  const changeScore = () => {
    scoreTatal.value = 0
    for (let i = 0; i < scoreList.length; i++) {
      scoreTatal.value += scoreList[i] * weightList[i]
    }
  }
  return { visible, showModal, handleOk, handleCancel, changeScore }
}

// 网络请求
const useHttpEffect = (token: string) => {
  const route = useRoute()
  const interview_id = route.query.interview_id
  const weight = ref<number[]>([])
  const getIterviewDetail = async () => {
    const res: any = await get(`/admin/api/v1/recruitment/interview/${interview_id}`, token)
    console.log(res)
    detaiData.value = res?.data?.details
    detaiData.value.forEach((detail) => {
      weight.value.push(detail.weight)
    })
    console.log(toRaw(weight.value))
  }
  const postScore = async (app_user_id: number, scoreTatal: number, record: string, emit: any) => {
    const res: any = await post(
      `/admin/api/v1/recruitment/interview/${interview_id}/score`,
      {
        app_user_id: app_user_id,
        score: scoreTatal, //分数
        record: record //记录
      },
      token
    )
    if (res?.status_code === 0) {
      message.success('评分成功')
      emit('changeBtnStatus', true)
    } else {
      message.error('评分失败')
      emit('changeBtnStatus', false)
    }
  }
  return { weight, getIterviewDetail, postScore }
}

export default defineComponent({
  props: ['app_user_id'],
  emits: ['changeBtnStatus', 'showModal'],
  setup(props, { emit }) {
    const token: string = localStorage.getItem('token') as string
    const { getIterviewDetail, weight } = useHttpEffect(token)
    const { scoreList, scoreTatal, record } = useScoreEffect()
    const { visible, showModal, handleOk, handleCancel, changeScore } = useModalEffect(token, props.app_user_id, scoreTatal, scoreList.value, weight.value, record, emit)

    onUpdated(() => {
      if (visible.value) {
        getIterviewDetail()
      }
    })
    return {
      detaiData,
      visible,
      showModal,
      handleOk,
      handleCancel,
      changeScore,
      scoreList,
      scoreTatal,
      record
    }
  }
})
</script>

<style lang="less" scoped>
.detail {
  &__text {
    display: flex;
    &title {
      font-size: 15px;
    }
    &__description {
      display: flex;
      align-items: flex-end;
      font-size: 12px;
      padding: 0 5px;
    }
  }
  &__score {
    padding: 5px 18px;
  }
}
</style>
